import React, { Component } from 'react';
import { Swiper } from 'antd-mobile'
interface Props {
}
interface State {
  swiperList: any,
  squareTopic: any
}
class App extends Component<Props, State> {
  constructor(props: Props) {
    super(props)
    this.state = {
      swiperList: [
        { src: require('../../gkk_img/swiper.png').default },
        { src: require('../../gkk_img/swiper.png').default },
        { src: require('../../gkk_img/swiper.png').default }
      ],
      squareTopic: [
        {
          title: '余光中先生说:“月色与雪色之间，你是第三种绝色.”',
          src: require('../../gkk_img/squareTopic_img1.png').default,
          avatar: require('../../gkk_img/squareTopic_avatar.png').default,
          des: '你得支棱起来啊',
          fans: '粉丝:',
          focus: '关注:',
          comment: require('../../gkk_img/squareTopic_img1.png').default,
          giveLike: require('../../gkk_img/squareTopic_img1.png').default
        },
        { src: require('../../gkk_img/squareTopic_com.png').default },
        { src: require('../../gkk_img/squareTopic_collect.png').default }
      ]
    }
  }
  render() {
    const items = this.state.swiperList.map((value: any, index: any) => (
      <Swiper.Item key={index}>
        <img className='swiper' src={value.src} />
      </Swiper.Item>
    ))
    const squareTopic_item = this.state.squareTopic.map((value: any, index: any) => (
      <Swiper.Item key={index}>
        <div className='squareTopic_item'>
          <div>
            <h5>{value.title}</h5>
            <img src={value.src} alt="" className='squareTopic_item_img' />
            {/* <div>
              <div>
                <img src={value.avatar} alt="" />
              </div>
              <div>
                <p>{value.des}</p>
                <p>
                  <span>{value.fans}</span>
                  <span>{value.focus}</span>
                </p>
              </div>
              <div>
                <div></div>
                <div></div>
              </div>
            </div> */}
          </div>
        </div>
      </Swiper.Item>
    ))
    return (
      <div className='home'>
        <div className='header_box'>
          <div className='bg'></div>
          <header>
            <img src={require('../../gkk_img/search.png').default} alt="" />
            <input type="text" placeholder='输入你想要的商品名称' />
            <button>搜索</button>
          </header>
        </div>
        <Swiper slideSize={85} stuckAtBoundary={false}>
          {items}
        </Swiper>
        <div className='home_tab'>
          <ul>
            <li>
              <div className='circle homeABack'></div>
              <span>数码家电</span>
            </li>
            <li>
              <div className='circle toolsBack'></div>
              <span>图文书具</span>
            </li>
            <li>
              <div className='circle shoesBack'></div>
              <span>服饰鞋包</span>
            </li>
            <li>
              <div className='circle makeupBack'></div>
              <span>美妆闲置</span>
            </li>
            <li>
              <div className='circle classifyBack'></div>
              <span>全部分类</span>
            </li>
          </ul>
        </div>
        <div className='publicWe'>
          <h4>
            <div>
              <i></i>
              <span>爱心公益</span>
            </div>
            <a href="">查看更多 &gt;</a>
          </h4>
          <div className='publicWe_imgBox'>
            <img src={require('../../gkk_img/publicWe.png').default} alt="" />
          </div>
          <div className='publicWe_heartBox'>
            <img src={require('../../gkk_img/heart.png').default} alt="" />
            <span>爱回收绿色公益</span>
          </div>
          <div className='publicWe_giveLoveBox'>
            <p>捐赠你的一份爱心 换来它人的一份温暖！</p>
            <div className='publicWe_giveLoveBox_right'>
              <div className='praise_box marR'>
                <i className='backImg'></i>
                <span>123</span>
              </div>
              <div className='praise_box marR'>
                <i className='backImg2'></i>
                <span>123</span>
              </div>
              <div className='praise_box'>
                <i className='backImg3'></i>
                <span>123</span>
              </div>
            </div>
          </div>
        </div>
        <div className='home_square'>
          <h4>
            <div>
              <i></i>
              <span>广场话题</span>
            </div>
            <a href="">查看更多 &gt;</a>
          </h4>
          <Swiper stuckAtBoundary={false} slideSize={80} defaultIndex={3}>
            {squareTopic_item}
          </Swiper>
        </div>
      </div>
    )
  }
}
export default App;